<div
  style="position: relative;background: white;width: 1200px;padding: 24px 96px;left: calc(50% - 600px)">
  <!--题目名称-->
  <div class="flexRow">
    <span class="questionNameLabel">题目名称：<span>*</span></span>
    <input nz-input placeholder="请输入题目名称"
                [(ngModel)]="questionData.questionName"
                [maxLength]="20"/>
    <span class="textLengthTip">{{questionData.questionName.length}}/20</span>
  </div>
  <div class="flexRow">
    <span class="questionNameLabel">内部名称：<span>*</span></span>
    <input nz-input placeholder="请输入内部题目名称"
                [(ngModel)]="questionData.internalName"
                [maxLength]="20"/>
    <span class="textLengthTip">{{questionData.internalName.length}}/20</span>
  </div>
  <!--题目是单选还是多选，多选不能跳转-->
  <div class="flexRow" style="margin-bottom: 12px">
    <nz-select [(ngModel)]="questionData.selectType" [nzBackdrop]="true" [disabled]="readonly">
      <nz-option [nzValue]="0" nzLabel="单选"></nz-option>
      <nz-option [nzValue]="1" nzLabel="多选"></nz-option>
    </nz-select>
    <nz-switch [(ngModel)]="questionData.isRequired" [disabled]="readonly"></nz-switch>
    {{questionData.isRequired ? '必选' : '非必选'}}
  </div>
  <!--选项区域-->
  <div cdkDropList class="optionList" (cdkDropListDropped)="dropOption($event)" *ngIf="questionData.options">
    <div class="questionData" *ngFor="let option of questionData.options;let optionIndex=index" cdkDrag>
      <div *ngIf="!option.deleteState">
        <div class="flexRow">
          <!--选项名称-->
          <input nz-input placeholder="请输入选项名称" [(ngModel)]="option.optionName" [maxLength]="50"/>
          <!--选项拖拽按钮-->
          <img class="optionDragIcon" src="../../../../../assets/images/dragOption.svg" cdkDragHandle>
          <!--删除选项按钮-->
          <button nzSize="small" nzDanger nz-button nzType="default" style="position: absolute;right: -30px" *ngIf="!readonly"
                  nz-popconfirm
                  nzPopconfirmTitle="确认要删除这个选项吗"
                  (nzOnConfirm)="removeOption(optionIndex)"
                  nzPopconfirmPlacement="left"><i nz-icon nzType="delete"></i></button>
          <span class="textLengthTip">{{option.optionName.length}}/50</span>
        </div>
        <!--是否可选-->
        <div class="flexRow">
          <nz-select [(ngModel)]="option.selectAble" [nzBackdrop]="true">
            <nz-option [nzValue]="true" nzLabel="可选"></nz-option>
            <nz-option [nzValue]="false" nzLabel="不可选"></nz-option>
          </nz-select>
          <nz-select [(ngModel)]="option.used" [nzBackdrop]="true">
            <nz-option [nzValue]="true" nzLabel="二手"></nz-option>
            <nz-option [nzValue]="false" nzLabel="准新机"></nz-option>
          </nz-select>
        </div>
        <!--不可选理由-->
        <div class="flexRow" *ngIf="!option.selectAble">
          <textarea rows="4" placeholder="不可选理由" nz-input [maxlength]="150" [(ngModel)]="option.invalidCause"></textarea>
          <span class="textLengthTip">{{option.invalidCause.length}}/150</span>
        </div>
        <!--选项说明-->
        <div class="flexRow">
          <textarea rows="4" placeholder="选项说明" nz-input [maxlength]="150" [(ngModel)]="option.optionRemark"></textarea>
          <span class="textLengthTip">{{option.optionRemark.length}}/150</span>
        </div>
        <!--选项图片-->
        <div class="flexRow" style="flex-wrap: wrap">
          <app-image-upload [addFileArea]="true" [deleteBtnVisible]="true" [imageUrls]="option.optionImages"
                            (deleteImg)="removeImg($event,optionIndex)" (urlChange)="appendImg($event,optionIndex)"
                            [maxImgLength]="3"></app-image-upload>
        </div>
      </div>
    </div>
  </div>
  <!--添加选项按钮-->
  <div class="addOptionBtn" (click)="addOption()">+添加选项</div>
  <!--操作按钮-->
  <div class="flexRow" style="justify-content: flex-end">
    <button nzDanger nz-button nzType="default" style="margin-right: 8px" (click)="back()">取消
    </button>
    <button nz-button nzType="primary" style="margin-right: 8px"
            (click)="saveQuestion()">保存
    </button>
  </div>
</div>
